<template>
	<view class="content">
		<downloadPop :file_path="file_path"></downloadPop>
		<view class="finishch">
			<view class="section-0">
				<view class="section-body">
					<view class="list">
						<view class="problem-wrapper" v-show="list.length < 1">
							<image src="https://www.mescroll.com/img/mescroll-empty.png"></image>
							<view class="">~ 空空如也 ~</view>
						</view>
						<view class="item" v-for="(item, index) in list" :key="index" v-show="list.length >= 1">
							<view class="parent">
								<view class="id">{{ item.name }}</view>
								<view class="name">
									<view class="text">文件编号</view>
									<text>：</text>
									{{ item.file_no }}
								</view>
								<view class="name">
									<view class="text">时间</view>
									<text>：</text>
									{{ item.done_time ? item.done_time.substring(0, 10) : '-' }}
								</view>
								<view class="name" >
									<view class="text">附件</view>
									<text>：</text>
									<u-button type="primary" class="button" @click="handleDownLoad(item.file_path)">附件下载</u-button>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import downloadPop from '@/components/download_pop/index.vue'
import { preliminaryDocumentsListApi } from '@/api/statistics.js'
import { mapGetters } from 'vuex'
export default {
	// onLoad() {
	// 	this.getProjectListApi()
	// },
	components: { downloadPop },
	data() {
		return {
			file_path: '',
			list: []
		}
	},
	computed: {
		...mapGetters({
			curProject: 'system/getCurProject'
		})
	},
	created() {
		this.getProjectListApi()
	},
	methods: {
		// 附件下载
		handleDownLoad(url) {
			this.file_path = ''
			setTimeout(() => {
				this.file_path = url
			}, 0)
		},
		getProjectListApi() {
			const obj = {
				project_id: this.curProject.id,
				type: '行政许可手续'
			}
			const data = preliminaryDocumentsListApi(obj).then(res => {
				res.data.data.forEach(item => {
					console.log(item)
					// if(item.type==obj.type){
					this.list.push(item)
					// }
				})
			})
		}
	}
}
</script>
<style lang="scss" scoped>
.content {
	background-color: #2e5efe;
	.finishch {
		width: 100%;
		background-color: #0534d6;
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;
		.section-0 {
			width: 100%;
			position: relative;
			z-index: 10;
			.section-body {
				width: 100%;
				height: 100%;
				border-top-left-radius: 50rpx;
				border-top-right-radius: 50rpx;
				background-color: #fff;
				overflow: hidden;
				padding-bottom: 100rpx;
				.list {
					width: 100%;
					box-sizing: border-box;
					.item {
						width: 100%;
						padding-top: 50rpx;
						.parent {
							// width: 99%;
							@include clear();
							margin: 0 40rpx;
							padding: 40rpx;
							border-radius: 40rpx;
							background-color: #ffffff;
							webkit-box-shadow: 0px 0px 10px #cccccc;
							moz-box-shadow: 0px 0px 10px #cccccc;
							box-shadow: 0px 0px 10px #cccccc;
							.id {
								padding-bottom: 20rpx;
								font-weight: bold;
								border-bottom: 2rpx solid #e3e8f5;
							}
							.name {
								width: 600rpx;
								margin-top: 30rpx;
								font-size: 26rpx;
								font-weight: bold;
								text-overflow:ellipsis;
								white-space:nowrap;
								letter-spacing: 2rpx;
								// float: left;
								display: flex;
								.text{
									font-size: 26rpx;
									color: #99A3AF;
									width: 110rpx;
									display: inline-block;
									text-align: justify;
									text-align-last: justify;
								}
								text{
									color: #99A3AF;
								}
								.button{
									font-size: 26rpx;
									width: 150rpx;
									height: 40rpx;
									margin-left: 0rpx;
								}
							}
							// .fujian{
							// 	color: #99A3AF;
							//     white-space: normal;
							// 		width: 600rpx;
							// 		margin-top: 20rpx;
							// 		font-size: 26rpx;
							// 		font-weight: bold;
							// 		text-overflow:ellipsis;
							// 		white-space:nowrap;
							// 		letter-spacing: 2rpx;
							// 		// float: left;
							// 		display: flex;
							// 		.text{
							// 			font-size: 26rpx;
							// 			width: 110rpx;
							// 			display: inline-block;
							// 			text-align: justify;
							// 			text-align-last: justify;
							// 		}
							// 		.text_a{
							// 			width: 450rpx;
							// 			color: #0066CC;
							// 			white-space: normal;
							// 		}
							// }
						}
					}
				}
				.problem-wrapper {
					color: #808080;
					margin: 0 auto;
					text-align: center;
					image {
						margin-top: 300rpx;
						width: 200rpx;
						height: 200rpx;
					}
				}
			}
		}
	}
}
.cs {
	font-size: 15px;
	padding: 20px 0 20px 30px;
	color: #65a0f4;
}
.cs span {
	font-weight: bold;
	color: #ffffff;
	margin-left: 10px;
}
</style>
